<template>
    <div class="electricCar">
        <ul>
            <li class="selected">
                <span>{{selected ? "车辆类型" : "驿站"}}</span>
                <span>{{selected ? "车牌" : "充电桩"}}</span>
                <span>{{selected ? "充电次数" : "时间"}}</span>
            </li>
            <li v-for="(item, index) in data1" :key="index" :class="[index % 2 ? 'selected' : '']">
                <span>{{selected ? data1[index].a : data2[index].a}}</span>
                <span @click="selected = 0">{{selected ? data1[index].b : data2[index].b}}</span>
                <span>{{selected ? data1[index].c : data2[index].c}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "electricCar",
    data() {
        return {
            selected: 1,
            xqN: ["金凯地小区", "尖家兜小区", "浔溪秀城小区"],
            data1: [
                {a: "雅迪", b: "浙E10254", c: "5"},
                {a: "欧派", b: "浙E10204", c: "4"},
                {a: "小刀", b: "浙E10244", c: "10"},
                {a: "欧派", b: "浙E10354", c: "9"},
                {a: "小刀", b: "浙E10854", c: "11"},
                {a: "小刀", b: "浙E10A54", c: "3"},
                {a: "雅迪", b: "浙E10854", c: "6"},
                {a: "欧派", b: "浙E14254", c: "8"},
                {a: "欧派", b: "浙E17254", c: "4"},
                {a: "小刀", b: "浙E19254", c: "1"},
                {a: "小刀", b: "浙E40254", c: "10"},
                {a: "小刀", b: "浙E60254", c: "5"},
                {a: "雅迪", b: "浙E30254", c: "8"},
            ],
            data2: [
                {a: "金凯地小区", b: "1-123", c: "2021-6-18 16:00"},
                {a: "金凯地小区", b: "4-123", c: "2021-6-19 16:00"},
                {a: "金凯地小区", b: "5-123", c: "2021-6-14 16:00"},
                {a: "金凯地小区", b: "10-123", c: "2021-6-18 16:00"},
                {a: "金凯地小区", b: "4-123", c: "2021-5-18 16:00"},
                {a: "金凯地小区", b: "6-123", c: "2021-4-18 16:00"},
                {a: "金凯地小区", b: "8-123", c: "2021-6-08 16:00"},
                {a: "金凯地小区", b: "7-123", c: "2021-6-09 16:00"},
                {a: "金凯地小区", b: "3-123", c: "2021-6-28 16:00"},
                {a: "金凯地小区", b: "1-153", c: "2021-7-28 16:00"},
                {a: "金凯地小区", b: "1-153", c: "2021-9-28 16:00"},
                {a: "金凯地小区", b: "1-153", c: "2021-10-28 16:00"},
                {a: "金凯地小区", b: "1-153", c: "2021-11-28 16:00"},
            ]
        }
    }
}
</script>

<style scoped>
.electricCar {
    width: 35%;
    height: 75%;
    color: #fff;
    background-color: #09142a;
    /* border: 2px solid #54abef; */
    border-radius: 2px;
    display: flex;
    flex-direction: column;
}
.electricCar >ul {
    color: #B4F2FF;
    text-align: center;
    padding: 24px 24px 0;
    height: 100%;
    overflow-y: scroll;
}
.electricCar >ul >li {
    padding: 12px 0;
    border-radius: 24px;
    margin-bottom: 24px;
    display: flex;
}
.electricCar >ul >li.selected {
    background: rgba(35, 160, 226, 0.2);
}
.electricCar >ul li span {
    flex: 1;
}
</style>